<template>
	<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
		<el-form-item v-for="(domain, index) in dynamicValidateForm.domains" 
			:label="'内容' + (index+1)" :key="domain.key" :prop="'domains.' + index + '.content'" 
			>
			<el-select v-model="domain.type" placeholder="请选择" :disabled='btnType==1'>
				<el-option v-for="item in typeSelect" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			<el-input type='textarea' v-model="domain.content" v-if="domain.type != 1 && domain.type != 2" :disabled='btnType==1'></el-input>
			<p v-if="domain.type != 0">
				<el-upload class="upload-demo"
					:action="baseURL"
					:on-remove="function(response, file, fileList){return handleRemove(file, fileList,index)}" 
					multiple :limit="1" 
					:file-list="fileList"
					:on-success='function(response, file, fileList){return uploadSuccess(response, file, fileList,index)}'
					:disabled='btnType==1'>
					<el-button size="small" type="primary">点击上传</el-button>
				</el-upload>
			</p>
			<p v-if="btnType == 1" style="width:100%">						
				<span v-if="domain.type==1 || domain.type==3">
					<img :src="domain.resourceUrl" style="width:150px"/>
				</span>
				<span v-if="domain.type==2 || domain.type==4">
					<video :src="domain.resourceUrl" controls="controls" width="150">
						当前浏览器不支持 video直接播放，点击这里下载视频： <a :href="domain.resourceUrl">下载视频</a>
					</video>
				</span>
			</p>
			<el-button @click.prevent="removeDomain(domain)" :disabled='btnType==1'>删除</el-button>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="submitForm('dynamicValidateForm')" :disabled='btnType==1'>提交</el-button>
			<el-button @click="addDomain" :disabled='btnType==1'>新增内容</el-button>
			<el-button @click="resetForm('dynamicValidateForm')" :disabled='btnType==1'>重置</el-button>
			<span v-if="btnType != 1" style="color:red;display: inline-block;margin-left: 20px;">编辑完成请点击提交</span>
		</el-form-item>
	</el-form>
</template>
<script>
	import {typeSelect} from '@/api/common'
	export default {
		name: 'addForm',
		props:['getDataFromSet','btnType'],
		created(){
			console.log(this.getDataFromSet)
			this.dynamicValidateForm.domains = this.getDataFromSet
		},
		watch:{
			getDataFromSet:function(newVal,oldVal){
				this.dynamicValidateForm.domains = newVal;
			}
		},
		data() {
			return {
				dynamicValidateForm: {
					domains: [{
						type: null,
						content: '',
						resourceUrl: ''
					}],
				},
				//baseURL: process.env.BASE_API + "/upload/uploadImage",    // api 的 base_url
				baseURL: "http://101.132.115.96:9008/bus/upload/uploadImage",
				typeSelect: typeSelect,	
				fileList: []
			};
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						this.$emit('getDataFromAddForm',this.dynamicValidateForm)
						console.log(this.getDataFromSet)
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			removeDomain(item) {
				var index = this.dynamicValidateForm.domains.indexOf(item)
				if(index !== -1) {
					this.dynamicValidateForm.domains.splice(index, 1)
				}
			},
			addDomain() {
				this.dynamicValidateForm.domains.push({
					type: null,
					content: '',
					resourceUrl: '',
				});
			},
			handleRemove(file, fileList, index) {
				console.log(file, fileList);
				console.log(index)
				this.dynamicValidateForm.domains[index].resourceUrl = '';
			},					
			uploadSuccess(response, file, fileList, index){
				console.log(index)
				console.log(response)
				this.dynamicValidateForm.domains[index].resourceUrl = response.data.url;
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style rel="stylesheet/scss" lang="scss">
	.demo-dynamic{
		h3 {
			margin: 40px 0 0;
		}
		
		ul {
			list-style-type: none;
			padding: 0;
		}
		
		li {
			display: inline-block;
			margin: 0 10px;
		}
		
		a {
			color: #42b983;
		}
		.el-textarea {
			width:70%
		}	
		.el-form-item .el-form-item__content {
			margin-left: 0 !important;
		}
	}
</style>